<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Sort Game - Ballyhass</title>
	<meta name="robots" content="follow" />
	<meta name="robots" content="all" />
	<meta name="revisit-after" content="2 days" />
	<link href="https://hangout001.googlecode.com/svn/trunk/_Hangouts/WebContent/SortGame/css/main_new.css" type="text/css" rel="stylesheet" />
	<style type="text/css">
.drag {border: 1px solid black; background-color: rgb(240, 240, 240); position: relative; padding: 0.5em; margin: 0 0 0.5em 1.5em; cursor: move;}
th, td {text-align: left; padding-right: 1em;}
table {margin: 0 0 0.4em 1.3em; border: 1px solid rgb(040, 040, 040);}
	</style>
</head>
<body>
	<div id="pageHeader">
		<h1>Sort Game - Ballyhass</h1>
		
	</div>
    <div id="pageContainer">
    <h4> Number of Moves: </h4>
    <h5 id="moves"></h5>
     <h4> Time: </h4>
    <h4 id="timerDisplay"></h4>
    
    <input type="button" value = "Start" onclick="startTimer();"/>
    
    <input type="text" id="txt" />
    
    <input type="button" value = "Stop" onclick="stopTimer();"/>
    
		<h4>Drag Item: </h4>
		<h5 id="debug"></h5>
		<div class="drag">Colm</div>
		<div class="drag">Barry</div>
		<div class="drag">Anne</div>
		
		<br/>
    <img border="0" src="https://hangout001.googlecode.com/svn/trunk/_Hangouts/WebContent/banner%20-%20extenstion.png" alt="Pulpit rock" width="278" height="100">
      <br/>
      <img border="0" src="https://hangout001.googlecode.com/svn/trunk/_Hangouts/WebContent/SortGame/images/banana.png" alt="Pulpit rock" width="278" height="100">
		<img class="drag" src="https://hangout001.googlecode.com/svn/trunk/_Hangouts/WebContent/SortGame/images/banana.png" alt="drag image" />
      
      <!--https://hangout001.googlecode.com/svn/trunk/_Hangouts/WebContent/banner%20-%20extenstion.png
      "https://hangout001.googlecode.com/svn/trunk/_Hangouts/WebContent/SortGame/images/banana.png"
      -->
		<br/>
		<img class="drag" src="https://hangout001.googlecode.com/svn/trunk/_Hangouts/WebContent/SortGame/images/orange.jpg" alt="drag image" />
		<br/>
		<img class="drag" src="https://hangout001.googlecode.com/svn/trunk/_Hangouts/WebContent/SortGame/images/apple.jpg" alt="drag image" />
		</div>
	
		
	<script language="JavaScript" type="text/javascript">
	
<!--

// this is simply a shortcut for the eyes and fingers
function $(id)
{
	return document.getElementById(id);
}

var _startX = 0;			// mouse starting positions
var _startY = 0;
var _offsetX = 0;			// current element offset
var _offsetY = 0;
var _dragElement;			// needs to be passed from OnMouseDown to OnMouseMove
var _oldZIndex = 0;			// we temporarily increase the z-index during drag
var _debug = $('debug');	// makes life easier
var _moves = $('moves');	 
var moveCounter = 0;
var c=0;
var t;
var timer_is_on=0;



InitDragDrop();

function timedCount()
{
	//On button click start the timer and display on page
	document.getElementById('txt').value=c;
	c=c+1;
	t=setTimeout(function(){timedCount()},1000);
}

function startTimer()
{
if (!timer_is_on)
  {
  timer_is_on=1;
  timedCount();
  }
}


function stopTimer()
{
	//Stop the timer
	//Display Number of Moves and Time Taken in MessageBox
	clearTimeout(t);
	timer_is_on=0;
	 
	alert('It took ' + moveCounter + ' moves in ' + c +' seconds');
	//Save to XML File Here
	
	
}


function InitDragDrop()
{
	document.onmousedown = OnMouseDown;
	document.onmouseup = OnMouseUp;
}

function OnMouseDown(e)
{
	
	
	// IE is retarded and doesn't pass the event object
	if (e == null) 
		e = window.event; 
	
	// IE uses srcElement, others use target
	var target = e.target != null ? e.target : e.srcElement;
	
	_debug.innerHTML = target.className == 'drag' 
		? 'draggable element clicked' 
		: 'NON-draggable element clicked';

	// for IE, left click == 1
	// for Firefox, left click == 0
	if ((e.button == 1 && window.event != null || 
		e.button == 0) && 
		target.className == 'drag')
	{
		// grab the mouse position
		_startX = e.clientX;
		_startY = e.clientY;
		
		// grab the clicked element's position
		_offsetX = ExtractNumber(target.style.left);
		_offsetY = ExtractNumber(target.style.top);
		
		// bring the clicked element to the front while it is being dragged
		_oldZIndex = target.style.zIndex;
		target.style.zIndex = 10000;
		
		// we need to access the element in OnMouseMove
		_dragElement = target;

		// tell our code to start moving the element with the mouse
		document.onmousemove = OnMouseMove;
		
		// cancel out any text selections
		document.body.focus();
		
		// prevent text selection in IE
		document.onselectstart = function () { return false; };
		// prevent IE from trying to drag an image
		target.ondragstart = function() { return false; };
		
		// prevent text selection (except IE)
		return false;
	}
}

function ExtractNumber(value)
{
	var n = parseInt(value);
	
	return n == null || isNaN(n) ? 0 : n;
}

function OnMouseMove(e)
{
	if (e == null) 
		var e = window.event; 

	// this is the actual "drag code"
	_dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
	_dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';
	
	_debug.innerHTML = '(' + _dragElement.style.left + ', ' + _dragElement.style.top + ')';	
}

function OnMouseUp(e)
{
	if (_dragElement != null)
	{
		_dragElement.style.zIndex = _oldZIndex;

		// we're done with these events until the next OnMouseDown
		document.onmousemove = null;
		document.onselectstart = null;
		_dragElement.ondragstart = null;

		// this is how we know we're not dragging
		_dragElement = null;
		
		_debug.innerHTML = 'mouse up';
		
		//JS Code		
		moveCounter++;;
		_moves.innerHTML = moveCounter;
		
	}
}
//-->
	</script>
		
	</body>

</html>
